<!DOCTYPE html>
<html class="no-js">
<head lang="en">
    <title>moile</title>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="stylesheet" type="text/css" href="./stylesheets/base.css">
    <link rel="stylesheet" type="text/css" href="./stylesheets/iconfont/iconfont.css">
    <style>
        .page {
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            min-width: 480px;
            margin: 0 auto;
            overflow: hidden;
        }

        .sider-menu {
            float: left;
            width: 0;
            height: 100%;
            background-color: #28b779;
            transition: width .2s ease-out;
        }

        .sider-menu.open {
            width: 140px;
        }

        .sider-menu li {
            height: 35px;
            line-height: 35px;
            text-align: center;
            overflow: hidden;
        }

        .sider-menu li {
            font-size: 16px;
            color: #fff;
        }

        .content {
            width: 100%;
            height: 100%;
            background-color: #ffab19;
        }

        .content-top-nav {
            width: 100%;
            height: 60px;
            line-height: 60px;
            background-color: #006666;
        }

        .content-top-nav a i {
            font-size: 28px;
            color: #fff;
        }

        .content-body li {
            line-height: 45px;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="sider-menu">
        <ul>
            <li><a href="javascript:void(0);">item1</a></li>
            <li><a href="javascript:void(0);">item1</a></li>
            <li><a href="javascript:void(0);">item1</a></li>
            <li><a href="javascript:void(0);">item1</a></li>
            <li><a href="javascript:void(0);">item1</a></li>
            <li><a href="javascript:void(0);">item1</a></li>
        </ul>
    </div>
    <div class="content">
        <div class="content-top-nav">
            <a href="javascript:void(0);"><i class="iconfont icon-gengduo"></i> </a>
        </div>
        <div class="content-body">
            <ul>
                <li>
                    <div>afsdfasdfsadfasd</div>
                </li>
                <li>
                    <div>afsdfasdfsadfasd</div>
                </li>
                <li>
                    <div>afsdfasdfsadfasd</div>
                </li>
                <li>
                    <div>afsdfasdfsadfasd</div>
                </li>
                <li>
                    <div>afsdfasdfsadfasd</div>
                </li>
                <li>
                    <div>afsdfasdfsadfasd</div>
                </li>
                <li>
                    <div>afsdfasdfsadfasd</div>
                </li>
                <li>
                    <div>afsdfasdfsadfasd</div>
                </li>
                <li>
                    <div>afsdfasdfsadfasd</div>
                </li>
                <li>
                    <div>afsdfasdfsadfasd</div>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(".content-top-nav>a").on("click", function () {
        /* var $siderMenu=$(".sider-menu");
         if($siderMenu.hasClass("open")){
         $siderMenu.removeClass("open");
         }else{
         $siderMenu.addClass("open");
         }*/
        $(".sider-menu").toggleClass("open");
        /*     var _a=$("<a>",{href:"javascript:void(0);",class:"testClass",text:"你好"})
         $(".sider-menu").append(_a);*/
    });
    $.preloadImages = function () {
        for (var i = 0; i < arguments.length; i++) {
            $("<img />").attr('src', arguments[i]);
        }
    };
</script>
</body>
</html>